<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :isFixed="scrollTop >= 0" :currentTab="currentTab" selectedColor="#007aff"
			sliderBgColor="#007aff" @change="change" itemWidth="50%"></tui-tabs>
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{ 'tui-item-list': scrollTop >= 0 }">
			<view class="tui-item-item" v-for="(order, Index) in orderList" :key="Index">
				<tui-list-cell :hover="false">
					<view class="tui-list-inline-item">
						<view class="tui-list-title">{{ order.facilityName }}</view>
						<tui-tag :type="orderStatusColorFormat(order.orderStatus)" plain padding="8rpx 13rpx">
							{{orderStatusFormat(order.orderStatus)}}
						</tui-tag>
					</view>
					<view style="line-height:40rpx;display:flex;justify-content: space-between;">
						<view style="color:#909399">
							<tui-icon size="14" name="gps" color="#06AD56" style="margin-right:8rpx;"></tui-icon>
							<text>{{ order.address }}</text>
						</view>
						<view style="color:#909399">
							<text>{{ order.orderTime }}</text>
						</view>
					</view>
					<tui-divider width="90%" :height="60">司机处理情况</tui-divider>
					<view class="deal-wrap">
						<view  class="deal-inline-item">
							<text style="color:#909399">车辆：</text>
							<text>{{ order.carNum }}</text>
						</view>
						<view class="deal-inline-item" >
							<text style="color:#909399">司机：</text>
							<text>{{ order.driverName }}</text>
						</view>
						<view class="deal-inline-item" >
							<text style="color:#909399">联系方式：</text>
							<text @tap="makePhoneCall(order.driverMobile)">{{ order.driverMobile }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理状态：</text>
							<text :style="{color:order.driverDealStatus==2?'green':'red'}">{{ !order.driverDealStatus?'':order.driverDealStatus==2?'已清运':'未清运' }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理时间：</text>
							<text>{{ order.driverDealTime?order.driverDealTime:'' }}</text>
						</view>
					</view>
					<tui-divider width="90%" :height="50">保洁员处理情况</tui-divider>
					<view class="deal-wrap">
					
						<view class="deal-inline-item">
							<text style="color:#909399">保洁员：</text>
							<text>{{ order.cleanerName }}</text>
						</view>
						<view class="deal-inline-item" >
							<text style="color:#909399">联系方式：</text>
							<text @tap="makePhoneCall(order.cleanerMobile)">{{ order.cleanerMobile }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理状态：</text>
							<text :style="{color:order.cleanerDealStatus==2?'green':'red'}">{{ !order.cleanerDealStatus?'':order.cleanerDealStatus==2?'已清运':'未清运' }}</text>
						</view>
						<view class="deal-inline-item">
							<text style="color:#909399">处理时间：</text>
							<text>{{ order.cleanerDealTime?order.cleanerDealTime:'' }}</text>
						</view>
					</view>
		
					<view class="tui-list-inline-item">
						<view>
							<tui-icon size="15" name="manager" color="#007aff"  style="margin-right:15rpx"></tui-icon>
							<text>{{order.managerName}}</text>
							<text @tap="makePhoneCall(order.managerMobile)">{{ order.managerMobile }}</text>
						</view>

						<view style="display:flex">
							<tui-button type="green" width="150rpx" size="28" height="60rpx" style="margin-right:15rpx;"
								@tap="openNavi(order)">
								<tui-icon size="15" name="navigation" color="#ffffff"></tui-icon>去这里
							</tui-button>

						</view>
					</view>
				</tui-list-cell>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="noMore" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {

				orderStatusDict: [{
					dictValue: 1,
					dictLabel: '待清运',
					color: 'warning'
				}, {
					dictValue: 2,
					dictLabel: '待检查',
					color: 'primary'
				}, {
					dictValue: 3,
					dictLabel: '已完成',
					color: 'green'
				}, {
					dictValue: 4,
					dictLabel: '已完成，未清运',
					color: 'danger'
				}],
				tabs: [{
						name: "待清运",
					},
					{
						name: "待检查",
					}, {
						name: "已完成",
					},
					{
						name: "异常",
					},
				],
				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				scrollTop: 0,
				orderList: [],
				total: 5,
				pageNum: 1,

			};
		},
		computed: {
			...mapState(["isLogin", "userinfo"]),

			noMore() {
				return this.orderList.length >= this.total;
			},
			disabled() {
				return this.loadding || this.noMore;
			},
			orderStatus() {
				return this.currentTab + 1;
			},
		},
		onShow() {
			this.orderList = [];
			this.pageNum = 1;
			this.getList();
		},
		methods: {
			orderStatusFormat(orderStatus) {
				return this.orderStatusDict.find(v => v.dictValue == orderStatus).dictLabel
			},
			orderStatusColorFormat(orderStatus) {
				return this.orderStatusDict.find(v => v.dictValue == orderStatus).color
			},
			getList() {
				this.loadding = true;
				this.tui.request(
						"/app/work/list",
						"GET", {
							pageSize: 5,
							pageNum: this.pageNum,
							orderStatus: this.orderStatus,
							managerId: this.userinfo.personId
						},
						false,
						false,
						false
					)
					.then((res) => {
						res.rows.map((v) => {
							this.orderList.push(v);
						});
						console.log(this.orderList)
						this.total = res.total;
						this.loadding = false;
						this.pageNum = this.pageNum + 1;
					});
			},
			change(e) {
				this.currentTab = e.index;
				this.total = 20;
				this.orderList = [];
				this.pageNum = 1;
				this.getList();
			},

			openNavi(order) {
				uni.openLocation({
					latitude: Number(order.lat),
					longitude: Number(order.lng),
					name: order.facilityName,
					address: order.address
				});
			},
			makePhoneCall(phoneNum){
				uni.makePhoneCall({
				    phoneNumber: phoneNum 
				});
			},
		
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
		},
		onReachBottom() {
			//只是测试效果，逻辑以实际数据为准
			if (!this.disabled) {
				this.getList();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	};
</script>

<style>
	.container {
		/* padding-bottom: env(safe-area-inset-bottom); */
		padding-bottom: 100rpx;
	}

	.tui-item-list {
		margin-top: 80rpx;
	}

	.tui-item-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-list-title {

		font-size: 32rpx;
		color: #000000;

	}

	.tui-list-inline-item {
		width: 100%;
		font-size: 28rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-text-gray {
		color: #888;
		font-size: 26rpx;

	}
	.deal-wrap{
		/* border:2rpx solid #909399; */
		border-radius:8rpx;
		padding:5rpx;
		font-size:28rpx;
		padding-left:10%;
	}
	.deal-inline-item{
		line-height: 40rpx;
	}
</style>
